let option = {
  grid: {
    left: 0,
    right: 0,
    containLabel: true
  },
  xAxis: {
    type: 'category',
    data: ['8:00', '10:00', '12:00', '14:00', '16:00', '18:00', '20:00']
  },
  yAxis: {
    type: 'value'
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: { // 坐标轴指示器，坐标轴触发有效
      type: 'none' // 默认为直线，可选为：'line' | 'shadow'
    },
    formatter: function (params) {
      params = params[0]
      var date = new Date()
      return date.getDate() + '/' + (date.getMonth() + 1) + '/' + date.getFullYear()
    }
  },
  series: [{
    data: [820, 932, 901, 934, 1290, 1330, 1320],
    type: 'line',
    smooth: true,
    itemStyle: {
      color: {
        type: 'linear',
        x: 0,
        y: 0,
        x2: 1,
        y2: 1,
        colorStops: [{
          offset: 0, color: '#17B7FE' // 0% 处的颜色
        }, {
          offset: 1, color: '#387BFF' // 100% 处的颜色
        }],
        globalCoord: false // 缺省为 false
      }
    }
  }]
}
let el = document.getElementById('reportData')
console.log(el)
echarts.init(el).setOption(option)
function _setBarColor (arr) {
  return new echarts.graphic.LinearGradient(
    0, 0, 1, 1,
    [
      {offset: 0, color: arr[0]},
      {offset: 1, color: arr[1]}
    ])
}
function setType(){
  let barColors = [['#0ACFFE', '#495AFF'], ['#8DDAD5', '#00CDAC'], ['#F09819', '#FF5858']]
  let option = {
    color: ['#3398DB'],
    tooltip: {
      trigger: 'axis',
      axisPointer: { // 坐标轴指示器，坐标轴触发有效
        type: 'none' // 默认为直线，可选为：'line' | 'shadow'
      },
      formatter: function (params) {
        var tar = params[0]
        return tar.axisValue + ' : ' + tar.value
      }
    },
    grid: {
      left: '2%',
      right: 0,
      containLabel: true
    },
    xAxis: [
      {
        type: 'category',
        data: ['安全报警', '仓库报警', '系统报警'],
        axisTick: {
          alignWithLabel: true
        }
      }
    ],
    yAxis: [
      {
        type: 'value'
      }
    ],
    series: [
      {
        type: 'bar',
        barWidth: '35%',
        data: [35, 65, 90],
        itemStyle: {
          normal: {
            color: (params) => {
              return _setBarColor(barColors[params.dataIndex])
            }
          }
        }
      }
    ]
  }
  let el = document.getElementById('type')
  echarts.init(el).setOption(option)
}
setType()

function _setObj () {
  let colors = ['#398BF7', '#04D79C', '#EF5350', '#E8AB2E']
  let option = {
    color: ['#3398DB'],
    tooltip: {
      trigger: 'axis',
      axisPointer: { // 坐标轴指示器，坐标轴触发有效
        type: 'none' // 默认为直线，可选为：'line' | 'shadow'
      },
      formatter: function (params) {
        var tar = params[0]
        return tar.axisValue + ' : ' + tar.value
      }
    },
    grid: {
      left: '2%',
      right: 0,
      containLabel: true
    },
    xAxis: [
      {
        type: 'category',
        data: ['温度', '湿度', '磷化氢', '电压'],
        axisTick: {
          alignWithLabel: true
        }
      }
    ],
    yAxis: [
      {
        type: 'value'
      }
    ],
    series: [
      {
        name: '直接访问',
        type: 'bar',
        barWidth: '30%',
        data: [35, 52, 200, 334],
        itemStyle: {
          normal: {
            color: (params) => {
              return colors[params.dataIndex]
            },
            barBorderRadius: [20, 20, 20, 20]
          }
        }
      }
    ]
  }
  let el = document.getElementById('obj')
  echarts.init(el).setOption(option)
}
_setObj()

function doAdd(){
  $(".content-one").click(function(){
    $(".content-one").css("background-image","none").css("color","black");
    $(this).css("background-image", "linear-gradient(-45deg, #4BC0FF 0%, #4CA9FF 98%, #4CA9FF 100%)").css("color","#FFFFFF");
    $(".child").css("color","#999999");
    $(this).next().css("color", "#4BBEFF");
  })
}
doAdd();